<!-- TODO -->
<script lang="ts" setup>
interface RowData {
  id: number
  name: string
  age: number
  address: string
  phone: string
  email: string
}

const columns = [
  { title: '序号', key: 'id' },
  { title: '名称', key: 'name' },
  { title: '年龄', key: 'age' },
  { title: '地址', key: 'address' },
  { title: '手机号', key: 'phone' },
  { title: '邮箱', key: 'email' },
]

const data: RowData[] = [
  {
    id: 10001,
    name: '颐和园',
    age: 22,
    address: 'yiheyuan road',
    phone: '13525253232',
    email: 'yiheyuan@qq.com',
  },
  {
    id: 10002,
    name: '坪山',
    age: 21,
    address: 'pingshan road',
    phone: '13656566969',
    email: 'pingshan@qq.com',
  },
  {
    id: 10003,
    name: '海淀',
    age: 31,
    address: ' haidian road',
    phone: '18122221111',
    email: 'haidian@qq.com',
  },
  {
    id: 10004,
    name: '王超',
    age: 44,
    address: 'wangchao road',
    phone: '18020012323',
    email: 'wangchao@qq.com',
  },
  {
    id: 10005,
    name: '小乔',
    age: 18,
    address: 'xoapqoap road',
    phone: '13856295241',
    email: 'xoapqoap@qq.com',
  },
]
</script>

<template>
  <div class="mt-5 h-[300px]">
    <n-card class="shadow-xl !rounded-xl">
      <n-data-table :columns="columns" :data="data" />
    </n-card>
  </div>
</template>

<style scoped></style>
